<template>
  <div>
    <headercom></headercom>
    <div class="bcg left_bcg htd_box">
      <div class="hedlist qx_hedlist">
        <div class="head_box">
          <div class="headbtn">
            <a-button type="primary" @click="addnewhtd">新增合同单</a-button>
          </div>
              <div class="sele">
              <a-select
              show-search
              placeholder="请输入客户名称"
              option-filter-prop="children"
              style="width: 200px"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="khmcchan"
              @search='khmcsec'
              allowClear
            >
              <a-icon slot="suffixIcon" type="search" :style="{ fontSize: '16px' }"  />
              <a-select-option
                :value="item.DWMC"
                v-for="(item, i) in khmclist"
                :key="i"
              >{{item.DWMC}}</a-select-option>
            </a-select>
          </div>
          <div class="sele">
            <a-input
              placeholder="请输入合同单号"
              v-model="keywords"
              @change="searchqxlist"
              class="sele_input"
            />
            <a-icon type="search" class="sear_ico" />
          </div>
      
          <div class="sele">
            <span>归属公司：</span>
            <a-select v-model="gsbm_val" disabled @change="handleGsbmChange" class="sele_input">
              <a-select-option :value="gs" v-for="(gs,i) in htdzzdata" :key="i">{{gs}}</a-select-option>
            </a-select>
          </div>
        </div>
      </div>
      <div class="htdzz_box">
        <a-table
          :columns="columns"
          :data-source="htdlist"
          @change="gethtdList"
          :pagination="pagination"
          :rowKey="(record,index)=>{return index}"
         :scroll="{ x: 1600 }"
        >
          <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
           <!-- <template slot="zdr" slot-scope="text, record, index">
            <div>
              <span >{{zdr_name}}</span>
            </div>
          </template> -->
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a-popconfirm title="确定要删除吗?" @confirm="() => alldel(record,record.key)">
                <a href="javascript:;" class="del">整单删除</a>
              </a-popconfirm>
              <a href="javascript:;" class="del" @click="edithtdlist(record,index,'edit_ok')">修改</a>
              <a-popconfirm title="确定要执行吗?" @confirm="() => actionbtn(record,index)">
                <a href="javascript:;" class="del">执行</a>
              </a-popconfirm>
              <a href="javascript:;" class="del" @click="print(record,index)">打印</a>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <div class="addnew_box" v-if="addnew_flag">
      <div class="htd_tk">
        <div class="close" @click="close">
          <a-icon type="close" />
        </div>
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="合同单制作">
            <div class="inpt_box" v-show="sp_inp_flag">
              <ul>
                <li>
                  <span class="inp_tit">发票类型：</span>
                  <a-select
                    :value="zzl_val"
                    style="width: 75%"
                    placeholder="请选择"
                    @change="zzsChange"
                  >
                    <a-select-option
                      v-for="(item, i) in sl_data"
                      :key="i"
                      :value="item.mc"
                    >{{item.mc}}</a-select-option>
                  </a-select>
                </li>
                <li>
                  <span class="inp_tit">税率：</span>
                  <!-- <a-input placeholder='请输入'></a-input> -->
                  <a-input-number
                  disabled
                    style="width: 75%"
                    :default-value="100"
                    :min="0"
                    :max="100"
                    v-model="sl_val"
                    :formatter="value => `${value}%`"
                    :parser="value => value.replace('%', '')"
                    @change="numberChange"
                  />
                </li>
                <li>
                  <span class="inp_tit">客户名称：</span>

                  <a-select
                    show-search
                    placeholder="必选"
                    option-filter-prop="children"
                    style="width: 75%"
                    :value="khmckews_val"
                    :filter-option="filterOption"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="khmcChange"
                    @search="khmcSearch"
                    allowClear
                  >
                    <a-select-option
                      :value="item.DWMC"
                      v-for="(item, i) in khmclist"
                      :key="i"
                      @click="khmctap(item.DWBH,item.RWR)"
                    >{{item.DWMC}}</a-select-option>
                  </a-select>
                </li>
                <li>
                  <span class="inp_tit">任务人：</span>
                  <a-select
                    :value="rwr_val"
                    placeholder="请选择"
                    allowClear
                    style="width: 75%"
                    @change="rwrChange"
                  >
                    <a-select-option v-for="(item, i) in rwr" :key="i" :value="item">{{item}}</a-select-option>
                  </a-select>
                </li>
                <!-- <li>
                  <span class="inp_tit">备注信息：</span>
                  <a-textarea
                    class="textarea"
                    style="    vertical-align: middle; width: 300px"
                    placeholder="请填写详细信息"
                    v-model="bzxx"
                  ></a-textarea>
                </li>-->
              </ul>
            </div>
            <div class="spxx_box" v-show="sp_inp_flag">
              <p class="tit_p">
                <span>商品信息</span>
              </p>
              <div class="spxx_list_data">
                <ul>
                  <li @click="selesplist" v-if="!$store.state.selectedrecord.length">
                    <p class="zw_p">暂无商品</p>
                  </li>
                  <li
                    :style="item.num&&item.money!=0?'':'border:1px solid red;'"
                    v-for="(item, i) in $store.state.selectedrecord"
                    :key="i"
                  >
                    <p class="yc ymInfo_yc">
                      <!-- <span v-show="spxx_index==i?false:true">{{item.xl}}</span> -->
                      <a-input
                        style="width:100%"
                        type="text"
                        v-model="item.xl"
                        name
                        id
                      ></a-input>
                    </p>
                    <div class="center">
                      <P>
                        <!-- <span v-show="spxx_index==i?false:true">{{item.sccjc}}</span> -->
                        <a-input
                          class="sccjc_yc yc"
                          style="width:90%"
                          type="text"
                          v-model="item.sccjc"
                        ></a-input>
                      </P>
                    </div>
                    <div class="center fot_mon">
                      <p>
                        <span style="color:#ccc">单价：</span>
                        <!-- <span v-show="spxx_index==i?false:true">{{item.money}}</span> -->
                        <a-input-number
                          :min="0"
                          style="width:50%"
                          type="text"
                          v-model="item.money"
                        />元
                      </p>
                      <p class="num_p">
                        <span style="color:#ccc">数量：</span>
                        <!-- <span v-show="spxx_index==i?false:true">{{item.num}}</span> -->
                        <a-input-number
                          :min="0"
                          id="inputNumber"
                          style="width:35%"
                          type="text"
                          v-model="item.num"
                          name
                        />

                        <!-- <span v-show="spxx_index==i?false:true">{{item.jldw}}</span> -->

                        <a-select
                          show-search
                          placeholder="Select a person"
                          option-filter-prop="children"
                          style="width: 35%"
                          v-model="item.jldw"
                          :filter-option="filterOption"
                          @focus="handleFocus"
                          @blur="handleBlur"
                          @change="jldwChange"
                        >
                          <a-select-option
                            v-for="(item, i) in jldwlist"
                            :key="i"
                            :value="item.mc"
                          >{{item.mc}}</a-select-option>
                        </a-select>
                      </p>
                    </div>
                    <div class="center cenedit">
                      <!-- <span
                        v-show="spxx_index==i?false:true"
                        class="xx_ico"
                        @click="editspxx(item,i)"
                      >
                        <span class="cz_style">修改</span>
                      </span> -->
                      <span  @click="delxx(item,i)" class="xx_ico">
                        <span class="cz_style">删除</span>
                      </span>
                      <!-- <span
                        v-show="spxx_index==i?true:false"
                        class="xx_ico"
                        @click="savsub(item,i)"
                      >
                        <span class="cz_style">保存</span>
                      </span>
                      <span
                        v-show="spxx_index==i?true:false"
                        class="xx_ico"
                        @click="cansav(item,i)"
                      >
                        <span class="cz_style">取消</span>
                      </span> -->
                    </div>
                  </li>
                </ul>
                <p class="click_spxx" >
              <span @click="selesplist"><a-icon type="bars" class="bars_ico" />选择商品</span>
                </p>
              </div>
            </div>
            <div class="textarea_box">
              <ul>
                <li>
                  <span class="inp_tit">备注信息：</span>
                  <!-- <a-input style="width: 300px" placeholder='请填写详细信息'></a-input> -->
                  <a-input
                    class="textarea"
                    style="    vertical-align: middle; "
                    placeholder="请填写详细信息"
                    v-model="bzxx"
                  ></a-input>
                </li>
              </ul>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="合同条款" force-render>
            <div class="httk_box">
              <div class="card-container">
                <a-tabs type="card">
                  <a-tab-pane key="1" tab="基本信息">
                    <ul class="ul_one">
                      <li>
                        <!-- <p class="p_tit">基本信息</p> -->
                        <div class="date_box htd_li">
                          <span>签约时间</span>
                          <a-date-picker
                            style="width:55%"
                            :placeholder="qyrq"
                            @change="dateChange"
                          />
                        </div>
                      </li>
                      <li>
                        <div class="date_box htd_li">
                          <span>签约地点</span>
                          <a-input style="width:55%" v-model="qydd" placeholder="请输入" />
                        </div>
                      </li>
                      <li>
                        <div class="date_box htd_li">
                          <span>法人代表</span>
                          <a-input style="width:55%" v-model="frdb" placeholder="请输入" />
                        </div>
                      </li>
                      <li>
                        <div class="date_box htd_li">
                          <span>委托代表</span>
                          <a-input style="width:55%" v-model="wtdb" placeholder="请输入" />
                        </div>
                      </li>
                      <li>
                        <div class="date_box htd_li">
                          <span>合同备注</span>
                          <a-textarea style="width:55%" v-model="htbz" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                    </ul>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="质量、包装、验收">
                    <ul class="ul_one">
                      <li>
                        <!-- <p class="p_tit">质量、包装、验收</p> -->
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">质量要求技术标准，供方对质量负责的条件</span>
                          <a-textarea v-model="htdtk.条款1" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                      <li>
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">包装标准，包装物的供应与回收</span>
                          <a-textarea v-model="htdtk.条款2" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                      <li>
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">验收标准，方法及提出异议期限</span>
                          <a-textarea v-model="htdtk.条款3" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                    </ul>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="运输及结算方式">
                    <ul class="ul_two">
                      <li>
                        <!-- <p class="p_tit">运输及结算方式</p> -->
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">运输方式及到达站港和费用负担</span>
                          <a-textarea v-model="htdtk.条款4" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                      <li>
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">交货地址与联系人</span>
                          <a-textarea v-model="htdtk.条款5" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                      <li>
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">结算方式及期限</span>
                          <a-textarea v-model="htdtk.条款6" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                    </ul>
                  </a-tab-pane>
                  <a-tab-pane key="4" tab="其他约定事项">
                    <ul class="ul_two">
                      <li>
                        <!-- <p class="p_tit">其他约定事项</p> -->
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">违约责任</span>
                          <a-textarea v-model="htdtk.条款7" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                      <li>
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">解决合同争议的解决方式</span>
                          <a-textarea v-model="htdtk.条款8" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                      <li>
                        <div class="date_box textarea_li htd_li">
                          <span class="tit_color">其他约定事项</span>
                          <a-textarea v-model="htdtk.条款9" placeholder="请输入"></a-textarea>
                        </div>
                      </li>
                    </ul>
                  </a-tab-pane>
                </a-tabs>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
        <div class="sub_btn">
          <a-button @click="close">取消</a-button>
          <a-button type="primary" @click="savfrom">保存</a-button>
        </div>
        <div class v-if="spxx_flag">
          <spxx></spxx>
        </div>
      </div>
    </div>
    <rightnav></rightnav>
    <div class="print_box" v-if="print_flag">
      <print></print>
    </div>
  </div>
</template>

<script>
import headercom from "../../header-comm/header.vue";
import spxx from "./spxx.vue";
import print from "./print/print.vue";
import qs from "qs";
import rightnav from "../rightnav.vue";

const columns = [
  {
    title: "单据编号",
    dataIndex: "djbh",
    key: "djbh",
    scopedSlots: { customRender: "djbh" }
  },
  {
    title: "制单人",
    dataIndex: "zdr",
    key: "zdr",
    scopedSlots: { customRender: "zdr" }

  },
  {
    title: "任务人",
    dataIndex: "rwr",
    key: "rwr"
  },
  {
    title: "制单日期",
    dataIndex: "zdrq",
    key: "zdrq"
  },
  {
    title: "客户名称",
    dataIndex: "dwmc",
    key: "dwmc"
  },
  {
    title: "总数量",
    dataIndex: "totalNum",
    key: "totalNum"
  },
  {
    title: "总金额",
    dataIndex: "totalPrice",
    key: "totalPrice"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    fixed:'right',
    width:280
  }
];

var htdlist = [];
export default {
  data() {
    return {
      htdlist,
      columns,
      keywords: "",
      gsbm: "",
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      // addnew_flag: true,
      addnew_flag: false,
      spxx_flag: false,
      sp_inp_flag: true,
      dataSource: ["Burns Bay Road", "Downing Street", "Wall Street"],
      zzl_val: undefined,
      sl_val: 0,
      rwr: "",
        zdr_name:sessionStorage.getItem("zdr"),
      khmclist: "",
      khmckews: "",
      khmckews_val: undefined,
      spxx_index: "1-1",
      jldwlist: "",
      num_val: 0,
      money_val: 0,
      bzxx: "",
      rwr_val: undefined,
      dwbh: "",
      edit_ok: "",
      publicData: "",

      htdtk: "",
      qyrq: "",
      qydd: "",
      frdb: "",
      wtdb: "",
      htbz: "",
      // 单位名称筛选数据
      djbhData: [],
      print_flag: false,
      print_data: "",
      gsbm_val: "查所有",
      sl_data: "",
      khmc_keywords:''
    };
  },

  methods: {
    numChange(value) {
      console.log("changed", value);
    },
    // searchqxlistSelect(e) {
    //   this.keywords = e;
    //   this.pagination.current = 1;
    //   this.gethtdList(this.pagination);
    // },
    searchqxlist(e) {
      this.gethtdList(this.pagination);
    },
    khmcchan(value) {
      console.log(`selected ${value}`);
        this.khmc_keywords = value;
        this.gethtdList(this.pagination);
    },
    khmcsec(value) {
      console.log(`selected ${value}`);
        this.khmckews = value;
        this.getkhdacx(1);
    },

    callback(key) {
      console.log(key);
    },
    addnewhtd() {
      this.addnew_flag = true;
      this.edit_ok = "no";
      this.zzl_val = undefined;
      this.publicData = "";
      this.sl_val = 0;
      this.khmckews_val = undefined;
      this.dwbh = "";
      this.rwr_val = undefined;
      this.bzxx = "";
      this.$store.state.selectedrecord = [];
      this.djbh = "";
    },
    gethtdList(pagination) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      var htdzzdata = this.htdzzdata + ",";

      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_htdList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: this.pagination.defaultPageSize,
            keywords: this.keywords,

            khmc:this.khmc_keywords,

            token: sessionStorage.getItem("smt_token"),
            rwr: "",
            rwrall: sessionStorage.getItem("xsuser"),
            gsbm: this.gsbm_val,
            allbm: htdzzdata
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.htdlist = res.data.result.resDate;

            let djbhsj = [];
            if (res.data.result.resDate) {
              for (var i = 0; i < res.data.result.resDate.length; i++) {
                djbhsj.push(res.data.result.resDate[i].djbh);
              }
              // 单位名称筛选
              this.djbhData = djbhsj;
              this.djbhData = new Set(djbhsj);
              this.djbhData = Array.from(this.djbhData);
              this.djbhData = this.djbhData.filter(function(s) {
                return s && s.trim();
              });
            }
            this.pagination.total = Number(res.data.result.totalDataNum);
          } else {
            this.pagination.total = 0;
          }
        });
    },
    getgsbm() {
      let htdzzdata = JSON.parse(sessionStorage.getItem("bjdzzdata"));
      if (htdzzdata.length > 1) {
        this.htdzzdata = htdzzdata;
        this.htdzzdata.unshift("查所有");
      } else {
        this.htdzzdata = [];
        console.log(this.htdzzdata);
      }
      this.gethtdList(this.pagination);
    },
    alldel(item, key) {
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_htddelete.php",
          qs.stringify({
            djbh: item.djbh,
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.gethtdList(this.pagination);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    zzsChange(value) {
      console.log(`selected ${value}`);
      this.zzl_val = value;
     if (value == "增值税普通发票") {
        this.sl_val = 3;
      } else if(value == "增值税专用发票") {
        this.sl_val = 13;
      }else{
        this.sl_val = 0;

      }
    },
    numberChange(value) {
      console.log("changed", value);
    },
    khmcChange(value) {
      console.log(`selected ${value}`);
      this.khmckews_val = value;
      // this.getkhdacx(1);
    },
    //打印
    print(item, index) {
      console.log(item);
      this.print_flag = true;
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_htdeditselect.php",
          qs.stringify({
            token: sessionStorage.getItem("smt_token"),
            djbh: item.djbh
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.print_data = res.data.result;
            this.print_data.listdata = item;
            console.log(this.print_data);
          }
        });
    },
    // 公司编码选择
    handleGsbmChange(value) {
      console.log(value);
      this.gsbm_val = value;
      this.gethtdList(this.pagination);

      // sessionStorage.setItem("gsbm", this.gsbm);
      // this.onSearch();
    },
    khmctap(dwbh,rwr) {
      this.dwbh = dwbh;
      this.rwr_val=rwr.trim()
    },
    khmcSearch(value) {
      console.log(`selected ${value}`);
      this.khmckews = value;
      this.getkhdacx(1);
    },
    rwrChange(value) {
      this.rwr_val = value;
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log("blur");
            this.khmckews = "";
      this.getkhdacx(1);
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    close() {
      this.addnew_flag = false;
      this.$store.state.selectedrecord = [];
      this.spxx_index = "1-1";
      this.qyrq = "";
      this.qydd = "";
      this.qydd = "";
      this.frdb = "";
      this.wtdb = "";
      this.htbz = "";
      this.gethtdList(this.pagination);
    },
    editspxx(item, index) {
      console.log(item, index);
      this.num_val = item.num;
      this.money_val = item.money;
      this.spxx_index = index;
    },
    savsub(item, index) {
      console.log(item, index);

      // this.$store.state.selectedrecord[index].num = this.num_val;
      // this.$store.state.selectedrecord[index].money = this.money_val;
      // this.$store.state.selectedrecord[index] = item;

      if (this.edit_ok == "edit_ok") {
        if (item.ID_NUM == "" || item.ID_NUM == undefined) {
          this.$store.state.selectedrecord[index].num = this.num_val;
          this.$store.state.selectedrecord[index].money = this.money_val;
          this.$store.state.selectedrecord[index] = item;
          this.spxx_index = "1-1";
        } else {
          this.axios
            .post(
              "https://yb.bearing.cn/wxapi/smt_htdEditDetails.php",
              qs.stringify({
                id_num: item.ID_NUM,
                xl: item.xl,
                sccjc: item.sccjc,
                money: this.money_val,
                num: this.num_val,
                jldw: item.jldw,
                token: sessionStorage.getItem("smt_token")
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 103) {
                this.$store.state.selectedrecord[index].num = this.num_val;
                this.$store.state.selectedrecord[index].money = this.money_val;
                this.$store.state.selectedrecord[index] = item;
                this.spxx_index = "1-1";

                // this.$notification["success"]({
                //   message: "成功",
                //   description: res.data.msg
                // });
              } else {
                // this.$notification["error"]({
                //   message: "失败",
                //   description: res.data.msg
                // });
              }
            });
        }
      } else {
        this.$store.state.selectedrecord[index].num = this.num_val;
        this.$store.state.selectedrecord[index].money = this.money_val;
        this.$store.state.selectedrecord[index] = item;
        this.spxx_index = "1-1";
      }
    },
    cansav(item, index) {
      this.spxx_index = "1-1";
      this.$store.state.selectedrecord[
        index
      ] = this.$store.state.selectedrecord[index];
    },
    delxx(item, index) {
      for (var i = 0; i < this.$store.state.selectedrecord.length; i++) {
        if (item.id == this.$store.state.selectedrecord[i].id) {
          console.log(i);
          this.$store.state.selectedrecord.splice(i, 1);
        }
      }
    },
    savfrom() {
      // for (var i = 0; i < this.$store.state.selectedrecord.length; i++) {
      //   if (
      //     this.$store.state.selectedrecord[i].money == "" ||
      //     this.$store.state.selectedrecord[i].money == 0 ||
      //     this.$store.state.selectedrecord[i].money == null
      //   ) {
      //     alert("请填写商品单价、数量");
      //     return false;
      //   }
      // }
      // console.log(this.zzl_val); //增值发票
      // console.log(this.sl_val); //增值率
      // console.log(this.khmckews_val); //客户名称
      // console.log(this.rwr_val); //任务人
      // console.log(this.bzxx); //备注
      // console.log(this.$store.state.selectedrecord);
      var htData = JSON.stringify(this.$store.state.selectedrecord);
      var name = sessionStorage.getItem("zdr");
      if (this.edit_ok == "edit_ok") {
        // 修改
        this.axios
          .post(
            this.$store.state.baseurl + "/wxapi/smt_htdedit.php",
            qs.stringify({
              fplx: this.zzl_val,
              hl: this.sl_val,
              dwmc: this.khmckews_val,
              dwbh: this.dwbh,
              djbh: this.djbh,
              rwr: this.rwr_val,
              zdr: name,
              gsbm: this.gsbm,
              bz: this.bzxx,
              htData: htData,
              token: sessionStorage.getItem("smt_token"),

              // 合同
              zxrq: this.qyrq,
              htqddd: this.qydd,
              htfrdb: this.frdb,

              htwtdb: this.wtdb,
              htbz: this.htbz,

              htzlyq: this.htdtk.条款1,
              htbzbz: this.htdtk.条款2,
              htysbz: this.htdtk.条款3,
              htthdd: this.htdtk.条款4,
              htysfs: this.htdtk.条款5,
              htjsfs: this.htdtk.条款6,
              htwyzr: this.htdtk.条款7,
              htjjjf: this.htdtk.条款8,
              htqtyd: this.htdtk.条款9
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 103) {
              this.$store.state.selectedrecord = [];
              this.gethtdList(this.pagination);

              this.addnew_flag = false;
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.spxx_index = "1-1";
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        // 新增
        this.axios
          .post(
            this.$store.state.baseurl + "/wxapi/smt_htdinsert.php",
            qs.stringify({
              fplx: this.zzl_val,
              hl: this.sl_val,
              dwmc: this.khmckews_val,
              dwbh: this.dwbh,
              rwr: this.rwr_val,
              zdr: name,
              gsbm: this.gsbm,
              bz: this.bzxx,
              htData: htData,
              token: sessionStorage.getItem("smt_token"),

              // 合同
              zxrq: this.qyrq,
              htqddd: this.qydd,
              htfrdb: this.frdb,

              htwtdb: this.wtdb,
              htbz: this.htbz,

              htzlyq: this.htdtk.条款1,
              htbzbz: this.htdtk.条款2,
              htysbz: this.htdtk.条款3,
              htthdd: this.htdtk.条款4,
              htysfs: this.htdtk.条款5,
              htjsfs: this.htdtk.条款6,
              htwyzr: this.htdtk.条款7,
              htjjjf: this.htdtk.条款8,
              htqtyd: this.htdtk.条款9
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 103) {
              this.$store.state.selectedrecord = [];
              this.gethtdList(this.pagination);

              this.addnew_flag = false;
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    },
    actionbtn(item, index) {
      var that = this;
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_implement.php",
          qs.stringify({
            djbh: item.djbh,
            gsbm: this.gsbm,
            token: sessionStorage.getItem("smt_token"),
            type: "HTD"
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.gethtdList(this.pagination);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    edithtdlist(item, index, edit_ok) {
      this.edit_ok = edit_ok;
      console.log(this.edit_ok);
      this.addnew_flag = true;
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_htdeditselect.php",
          qs.stringify({
            token: sessionStorage.getItem("smt_token"),
            djbh: item.djbh
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            if (res.data.result.publicData.SL == "3.00") {
              this.zzl_val = "增值税普通发票";
            } else if(res.data.result.publicData.SL == "13.00") {
              this.zzl_val = "增值税专用发票";
            }else{
              this.zzl_val = "未税";

            }
            this.publicData = res.data.result;
            this.sl_val = this.publicData.publicData.SL;
            this.khmckews_val = this.publicData.publicData.DWMC;
            this.dwbh = this.publicData.publicData.DWBH;
            this.rwr_val = this.publicData.publicData.RWR;
            this.bzxx = this.publicData.publicData.BZ;
            for (var i = 0; i < this.publicData.htData.length; i++) {
              this.publicData.htData[i].id = i;
            }
            this.$store.state.selectedrecord = this.publicData.htData;
            this.djbh = this.publicData.djbh;

            this.qyrq = this.publicData.publicData.ZXRQ;
            this.qydd = this.publicData.publicData.HTQDDD;
            this.qydd = this.publicData.publicData.HTQDDD;
            this.frdb = this.publicData.publicData.HTFRDB;
            this.wtdb = this.publicData.publicData.HTWTDB;
            this.htbz = this.publicData.publicData.HTBZ;

            //    BZ: "1111"
            // DWBH: "200917-106975KHBBL"
            // DWMC: "123456"
            // RWR: "王圣磊"
            // SL: "13.00"
          }
        });
    },
    getkhdacx(page) {
      this.axios
        .post(
          this.$store.state.baseurl +
            "/wxapi/smt_khdacx.php?page=" +
            page +
            "&gsbm=" +
            this.gsbm,
          qs.stringify({
            rwrall: this.rwr,
            khmc: this.khmckews,
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.result.length) {
            this.khmclist = res.data.result;
          }
        });
    },
    selesplist() {
      console.log("111111");
      this.spxx_flag = true;
      this.sp_inp_flag = false;
    },
    getjldwlist() {
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_publicDataList.php",
          qs.stringify({
            keywords: "",
            token: sessionStorage.getItem("smt_token"),
            mc: "计量单位"
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.jldwlist = res.data.result;
          }
        });
    },
    jldwChange(value) {
      console.log(`selected ${value}`);
    },
    // handleBlur() {
    //   console.log("blur");
    //      this.khmckews = "";
    //   this.getkhdacx(1);
    // },
    // handleFocus() {
    //   console.log("focus");
    // },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    dateChange(date, dateString) {
      console.log(date, dateString);
      this.qyrq = dateString;
    },
    //获取合同条款
    getHttk() {
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_htdtk.php",
          qs.stringify({
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 102) {
            this.htdtk = res.data.result;
          }
        });
    },
    //税率
    getSl() {
      var that = this;
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_getSl.php",
          qs.stringify({
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          if (res.data.code == 103) {
            this.sl_data = res.data.result;
          }
        });
    }
  },
  components: {
    headercom,
    spxx,
    rightnav,
    print
  },
  created() {
    //   var reg = new RegExp('|',"g");//g,表示全部替换。

    var rwr = sessionStorage.getItem("xsuser");
    console.log(rwr);

    this.gsbm = sessionStorage.getItem("gsbm");
    this.gsbm_val = sessionStorage.getItem("gsbm");

    this.rwr = rwr.split("|");
    if (this.rwr.length > 1) {
      this.rwr.unshift("请选择");
    }
    // this.rwr =  this.rwr+"";

    console.log(this.rwr);

    // this.rwr=sessionStorage.getItem("xsuser")
    this.gethtdList(this.pagination);
    this.getkhdacx(1);
    this.getjldwlist();
    this.getHttk();
    this.getgsbm();
    this.getSl();
  }
};
</script>

<style lang='less' scoped>
.htdzz_box {
  position: relative;
  left: 1%;
  top: 140px;
  width: 98%;
  text-align: left;
  padding: 20px;
  background: #fff;
}
.htd_box {
  .sear_ico {
    position: absolute;
    right: 10px;
    top: 22px;
    display: inline-block;
    font-size: 17px;
    color: #999;
  }
}

// .ant-tabs-nav{
//   left: -34%;
// }
.qx_hedlist {
  // position: relative;
  // top: 65px;
  // width: 98% !important;
  // left: 1%;
  // height: 60px;
  // background-color: #fff;
  // text-align: left;
  // padding: 15px;
  // display: -webkit-box;
  // display: -ms-flexbox;
  // display: flex;
  // -webkit-box-pack: justify;
  // -ms-flex-pack: justify;
  // justify-content: space-between;
  position: fixed;
  z-index: 999;
  width: 71%;
  left: 10%;
  top: 50px;
  height: 90px;
  line-height: 60px;
  background-color: #f3f7f9;
  .head_box {
    width: 100%;
    display: flex;
    // justify-content: space-around;
    background-color: #fff;
    flex-wrap: wrap;
    .headbtn {
      margin: 0 20px;
    }
    .sele {
      // margin-bottom: 15px;
      margin: 0 20px;
      text-align: center;
      position: relative;
      .sele_input {
        width: 170px;
      }
      .ant-select-selection__clear {
        right: 50px;
      }
      .ant-select-auto-complete.ant-select .ant-input {
        height: 32px !important;
      }
      .ant-btn-lg {
        height: 32px !important;
      }
      .search {
        position: absolute;
        top: 8px;
        right: 15px;
        font-size: 18px;
      }
    }
  }
}
.addnew_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .htd_tk {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 57%;
    height: 600px;
    background: #fff;
    .close {
      z-index: 99;
    }
    .inpt_box {
      text-align: left;
      padding: 0px 20px 0;
      // display: inline-block;
      width: 100%;
      ul {
        li {
          margin: 10px 0;
          display: inline-block;
          width: 50%;
          .inp_tit {
            display: inline-block;
            width: 24%;
            text-align: left;
            padding-left: 20px;
          }
          .ant-select-auto-complete.ant-select .ant-select-search--inline {
            margin: 0;
          }
        }
      }
    }
    .spxx_box {
      text-align: left;
      padding: 0 20px;
      // display: inline-block;
      width: 100%;
      vertical-align: top;
      .tit_p {
        // margin-top: 20px;
        margin-bottom: 0;
        background: #f1f1f1;
        padding: 10px 20px;
      }
      .spxx_list_data {
        ul {
          overflow-y: scroll;
          max-height: 180px;
          // min-height: 180px;
          li {
            border-bottom: 1px solid #f1f1f1;
            padding: 5px 0px;
            margin: 0 15px;
            display: -webkit-box;
            display: -ms-flexbox;
            // display: flex;
            // -webkit-box-pack: justify;
            // -ms-flex-pack: justify;
            // justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            p {
              margin: 0;
            }
            .sccjc_yc {
              width: 75px;
            }
            .center {
              width: 20%;
              text-align: left;
            }
            // 溢出隐藏公共
            .yc {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .spmc_yc {
              width: 70px;
            }
            .ymInfo_yc {
              width: 25%;
            }
            .zw_p {
              text-align: center;
              line-height: 100px;
              // box-shadow: 0 0 5px #ccc;
              color: #999;
              cursor: pointer;
            }
            .cenedit {
              width: 14%;
              text-align: right;
              // display: flex;
              // justify-content: space-between;
              .cz_style {
                font-size: 14px;
                color: #1890ff;
              }
              .xx_ico {
                margin: 0 10px;
                font-size: 18px;
                cursor: pointer;
              }
            }
            .fot_mon {
              display: flex;
              justify-content: space-between;
              width: 42%;
              p {
                width: 40%;
                text-align: left;
              }
              .num_p {
                width: 60%;
              }
            }
          }
        }
      }

      .click_spxx {
        color: #1890ff;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        .bars_ico {
          font-size: 20px;
          vertical-align: top;
        }
      }
    }
  }
  /deep/.ant-tabs-nav-wrap {
    text-align: left !important;
  }

  @media (max-width: 1800px) {
    .htd_tk {
      width: 60%;
      top: 3%;
    }
  }
  @media (max-width: 1500px) {
    .htd_tk {
      width: 70%;
      top: 3%;
      // max-height: 500px;

      // height: 464px;
    }
  }
}
.sub_btn {
  text-align: center;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  button {
    width: 130px;
    margin: 0 10px;
  }
}
/deep/.ant-tabs-bar {
  border-bottom: 0 !important;
  padding: 40px 40px 10px;
  text-align: left;

  // margin-bottom: 0;
}
.textarea_box {
  text-align: left;
  padding: 0 20px;
  ul {
    li {
      text-align: left;

      .inp_tit {
        display: inline-block;
        width: 12%;
        text-align: left;
        padding-left: 20px;
        // padding: 0 20px;
      }
      .textarea {
        width: 88%;
      }
    }
  }
}
.httk_box {
  padding: 0 20px;
  position: relative;
  top: -16px;
  width: 100%;
  background: #f5f5f5;
  margin: 0 auto;
  .card-container {
    /deep/.ant-tabs-bar {
      border-bottom: 0 !important;
      padding: 0;

      height: auto;
      // max-height: 600px;
      text-align: left;
      margin-bottom: 1px;
    }
  }
  ul {
    padding: 0 10px;
    li {
      margin: 10px 0;
      .p_tit {
        // background: #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
        text-align: left;
        padding: 10px 0px;
      }
      .htd_li {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .textarea_li {
        display: block;
        text-align: left;
        .tit_color {
          color: #ccc;
        }
        span {
          margin: 5px 0;
          display: inline-block;
        }
        textarea.ant-input {
          display: block;
          width: 100%;
          min-height: 50px;
        }
      }
    }
  }

  .ul_one {
    display: inline-block;
    width: 100%;
  }
  .ul_two {
    display: inline-block;
    width: 100%;
    vertical-align: top;
  }
  .ant-tabs-nav-scroll {
    text-align: left;
  }
  .card-container {
    background: #f5f5f5;
    overflow: hidden;
    padding: 24px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    height: 470px;
    // padding-top: 0;
    // max-height: 600px;
  }

  .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
    background: #fff;
    padding: 16px;
    height: 418px;
  }

  .card-container > .ant-tabs-card > .ant-tabs-bar {
    border-color: #fff;
  }

  .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
    border-color: transparent;
    background: transparent;
  }

  .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
    border-color: #fff;
    background: #fff;
  }
  .ant-tabs .ant-tabs-top-content,
  .ant-tabs .ant-tabs-bottom-content {
    position: relative;
    top: -15px;
  }
  .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
  .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
    // background: #f5f5f5;
  }
}
/deep/.ant-select-auto-complete.ant-select-lg .ant-input {
  height: auto !important;
}
</style>
